<template>
  <ContainerContent :loading="loading" :pagination="false">
    <a-form
      ref="formRef"
      :model="formState"
      layout="vertical"
      :rules="rules"
      class="w-100!">
      <a-form-item
        label="主控通信地址"
        field="address"
        class="admin-address"
        hide-asterisk>
        <a-input v-model="formState.address" placeholder="请输入主控通信地址" />
      </a-form-item>
    </a-form>
    <a-button
      type="primary"
      class="w-74px mt-6"
      :loading="saveLoading"
      @click="handleSave"
      >保存</a-button
    >
  </ContainerContent>
</template>
<script lang="ts" setup>
import {
  getApiConfigMgrAddrApi,
  updateApiConfigMgrAddrApi
} from '@/apis/modules/config'
import ContainerContent from '@/components/ContentContainer.vue'
import type { FieldRule } from '@arco-design/web-vue'

const formState = reactive({
  address: ''
})

const formRef = ref()
const rules: Record<string, FieldRule> = {
  address: { required: true, validator: validateMasterAddr }
}
const loading = ref(false)
const getAddress = () => {
  loading.value = true
  getApiConfigMgrAddrApi()
    .then((res) => {
      formState.address = res.value ?? ''
    })
    .finally(() => {
      loading.value = false
    })
}
const saveLoading = ref(false)
const handleSave = async () => {
  const error = await formRef.value?.validate()
  if (error) return
  saveLoading.value = true
  updateApiConfigMgrAddrApi({ value: formState.address })
    .then(() => {
      ToastUtils.success('操作成功')
    })
    .finally(() => (saveLoading.value = false))
}
onMounted(getAddress)
</script>
